<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>register-login</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/style.css">
    <script src="${pageContext.request.contextPath}/statics/bootstrap3/jquery-1.9.1.min.js"></script>

    <%--<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/statics/layui/css/layui.css"/>--%>
    <script src="${pageContext.request.contextPath}/statics/layui/layui.js"></script>
</head>

<body>
<div class="content">
    <div class="form sign-in">
        <h2>欢迎回来</h2>
        <label>
            <span>用户</span>
            <input type="email" id="login-username"/>
        </label>
        <label>
            <span>密码</span>
            <input type="password" id="login-pwd"/>
        </label>
        <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>
        <button type="button" id="login-btn" class="submit">登 录</button>
    </div>
    <div class="sub-cont">
        <div class="img">
            <div class="img__text m--up">
                <h2>还未注册？</h2>
                <p>立即注册，发现大量机会！</p>
            </div>
            <div class="img__text m--in">
                <h2>已有帐号？</h2>
                <p>有帐号就登录吧，好久不见了！</p>
            </div>
            <div class="img__btn">
                <span class="m--up">注 册</span>
                <span class="m--in">登 录</span>
            </div>
        </div>
        <div class="form sign-up">
            <h2>立即注册</h2>
            <label>
                <span>用户名</span>
                <input type="text" id="input-username"/>
            </label>
            <label>
                <span>密码</span>
                <input type="password" id="pwd"/>
            </label>
            <label>
                <span>确认密码</span>
                <input type="password" id="confirmPwd"/>
            </label>
            <button type="button" id="reg-btn" class="submit">注 册</button>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/statics/js/script.js"></script>
<script>
    //添加失去焦点事件
    $("#input-username").blur(function () {
        var username = $("#input-username").val();
        if(username == null || username == ""){
            layer.msg("注册名不能为空");
            return;
        }

        var param = {"username":username}
        $.post("/user/checkRegisterName", param, function (data) {
            if (data.state == 200){
                layer.msg(data.msg);
            }else{
                layer.msg(data.msg);
                $("#input-username").val("");
            }
        }, "json");

    });

    //判断密码和确认密码是否一样
    $("#confirmPwd").blur(function () {
        var password = $("#pwd").val();
        var confirmPwd = $("#confirmPwd").val();
        if (password == null || password == ""){
            layer.msg("密码不能为空");
            return;
        }else if (confirmPwd == null || confirmPwd == ""){
            layer.msg("确认密码不能为空");
            return;
        }else if (password != confirmPwd){
            layer.msg("密码和确认密码不相同");
            $("#pwd").val("");
            $("#confirmPwd").val("");
            return;
        }else {
            layer.msg("密码和确认密码验证通过");
        }

    });

    //注册
    $("#reg-btn").click(function () {
        var username = $("#input-username").val();
        var password = $("#pwd").val();
        var confirmPwd = $("#confirmPwd").val();

        var param = {"userName": username, "password": password, "confirmPwd": confirmPwd};
        $.post("/user/doRegister", param ,function (data) {
            if (data.state == 200){
                layer.msg(data.message);
                location.href = "/user/toLogin";
            }else {
                layer.msg(data.message);
            }
        });
    });

    //登录名检查
    $("#login-username").blur(function () {
        var username = $("#login-username").val();
        if (username == null || username == ""){
            layer.msg("用户名不能为空");
            return;
        }

        var param = {"username": username};
        $.post("/user/checkLoginName", param, function (data) {
            if (data.state == 200){
                layer.msg(data.message);
            }else {
                layer.msg(data.message);
                $("#login-username").val("");
            }
        });
    });

    //登录
    $("#login-btn").click(function () {
        var username = $("#login-username").val();
        var password = $("#login-pwd").val();

        var param = {"username": username, "password": password};
        $.post("/user/doLogin", param, function (data) {
            if (data.state == 200){
                layer.msg(data.message);
                location.href = "/user/toIndex";
            }else {
                layer.msg(data.message);
            }
        });

    });


</script>

</body>

</html>
